<template>
    <div id="articleEdit">
        <div class="header">
            <breadcrumb></breadcrumb>
        </div>
        <div class="articleTable">
            <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                     class="demo-ruleForm">
                <el-form-item class="middleSelect" label="文章标题" prop="ruleForm.article_title">

                </el-form-item>
                <div>
                    <el-input style="width: 500px;" placeholder="请输入文章标题" v-model="ruleForm.article_title"></el-input>
                </div>
                <el-form-item label="文章详情" prop="ruleForm.article_content">

                </el-form-item>
                <div class="app-container calendar-list-container">
                    <div style="width: 90%;">
                        <editor
                                class="editor"
                                path="article"
                                :value="ruleForm.article_content"
                                :setting="editorSetting"
                                @show="editors"
                                :with-credentials="withCredentials"
                                @on-upload-fail="onEditorReady"
                                @on-upload-success="onEditorUploadComplete"></editor>
                    </div>
                </div>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
                    <el-button @click="resetForm">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {updateArticle, getArticle, addArticle} from '@/api/article';
    import breadcrumb from '@/components/currency/breadcrumb';
    import editor from '@/components/currency/tinymceEditor'
    export default {
        name: 'articleEdit',
        components: { breadcrumb,editor },
        data() {
            var validateTitle = (rule, value, callback) => {
                if (!this.ruleForm.article_title) {
                    return callback(new Error('请填写博文标题'));
                }
            };
            var validateContent = (rule, value, callback) => {
                if (!this.ruleForm.article_content) {
                    return callback(new Error('请填写博文内容'));
                }
            };
            return {
                editorSetting: { // 配置富文本编辑器高
                    height: 500
                },
                type:-1,
                article_id:-1,
                withCredentials: true,
                article_content: '', // 富文本编辑器双向绑定的内容
                ruleForm: {
                    article_title: '',
                    article_content: '',
                },
                rules: {
                    article_title: [
                        { required: true,validator: validateTitle, trigger: 'blur' }
                    ],
                    article_content: [
                        { required: true,validator: validateContent, trigger: 'blur' },
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //this.ruleForm.article_content = this.article_content;
                        if (this.type === 1) {
                            addArticle(this.ruleForm.article_title,this.ruleForm.article_content,this.$cookie.get('user_id'))
                                .then(value => {
                                    if (value.code === 200) {
                                        this.$router.back(-1);
                                        this.$message({
                                            type: 'success',
                                            message: '添加成功'
                                        });
                                    } else {
                                        this.$message({
                                            type: 'error',
                                            message: value.msg
                                        });
                                    }
                                });
                        }else if(this.type === 2){
                            updateArticle(this.article_id,this.ruleForm.article_title,this.ruleForm.article_content)
                                .then(value => {
                                    if (value.code === 200) {
                                        this.$router.back(-1);
                                        this.$message({
                                            type: 'success',
                                            message: '修改成功'
                                        });
                                    } else {
                                        this.$message({
                                            type: 'error',
                                            message: value.msg
                                        });
                                    }
                                });
                        }else {
                            console.log('error!');
                        }
                        //console.log(this.ruleForm);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm() {
                this.$router.back(-1);
            },
            editors(content) { // editor组件传过来的值赋给content
                //console.log(content)
                this.ruleForm.article_content = content
            },
            onEditorReady(ins, ina) { // 上传失败的函数
                console.log('ins');
                console.log(ins);
                console.log(ina)
            },
            onEditorUploadComplete(json) { // 处理上传图片后返回数据，添加img标签到编辑框内
                console.log('json');
                console.log(json);
                console.log(json[0].data.filePath)
                //this.content = this.content + '<img src=' + json[0].data.filePath + '>'
            },
            async init() {
                await getArticle(this.$route.params.id).then(val => {
                    this.article_id = val.article_id;
                    this.ruleForm.article_title = val.article_title;
                    this.ruleForm.article_content = val.article_content;
                    this.article_content = val.article_content;
                });

            }
        },
        mounted() {
            this.type = this.$route.matched[this.$route.matched.length - 1].meta.type;
            if (this.type === 2) {
                this.init();
            }
        }
    };
</script>

<style lang="scss">
    #articleEdit {
        .shortSelect {
            .el-input__inner {
                width: 150px;
            }
        }

        .middleSelect {
            .el-input__inner {
                width: 450px;
            }
        }
        .el-form-item{
            display: flex;
        }
        .el-form-item__label{
            flex: 1;
        }
        .el-form-item__content{
            flex: 7;
        }
        .el-form-item__error{
            top: 30%;
        }
        .el-form--label-top .el-form-item__label{
            padding: 0;
        }
        .app-container{
            margin-bottom: 15px;
        }
    }
</style>
